<template>
  <a-layout id="components-layout" class="layout">
    <a-layout-header>
      <div class="header">
        <div>
          <div class="logo">
            <img src="../assets/favicon.png" height="25" />
            实施平台
          </div>
          <a-menu
            theme="dark"
            mode="horizontal"
            :selectedKeys="[activeMenu]"
            :style="{ lineHeight: '64px' }"
            @click="menuClick"
          >
            <template v-for="(item, i) in menuList">
              <a-menu-item :key="item.url || i">
                <span>{{ item.title }}</span>
              </a-menu-item>
            </template>
          </a-menu>
        </div>
        <a-dropdown>
          <a :style="{ color: 'white' }">
            <a-icon type="user" /> {{ user.name }} <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a @click="changePwd"><a-icon type="tool" /> 修改密码</a>
            </a-menu-item>
            <a-menu-item>
              <a @click="loginout()"><a-icon type="logout" /> 退出登录</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
      <FormModal
        :form-config="ModalConfig"
        ref="changePwdForm"
        @submit="changePwdForm"
      />
    </a-layout-header>
    <a-layout-content>
      <div class="body">
        <router-view></router-view>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script>
import FormModal from "../components/FormModal";

export default {
  name: "home",
  data() {
    return {
      openKeys: [],
      ModalConfig: {
        title: "修改密码",
        items: [
          {
            name: "pwd",
            label: "密码",
            type: "password",
            rules: [{ required: true, message: `请输入密码` }],
          },
          {
            name: "confirmPwd",
            label: "确认密码",
            type: "password",
            rules: [{ required: true, message: `请输入确认密码` }],
          },
        ],
      },
    };
  },
  created() {
    const token = sessionStorage.getItem("Authorization");
    if (!token) {
      this.$router.replace({
        path: "/login",
      });
    }
  },
  methods: {
    // 点击菜单，路由跳转,注意的是当点击MenuItem才会触发此函数
    menuClick({ key }) {
      // 获取到当前的key,并且跳转
      this.$router.push({
        path: key,
      });
    },
    loginout() {
      this.$store.commit("setLoginOut");
    },
    changePwd() {
      this.$refs.changePwdForm.handleOpenForm({});
    },
    changePwdForm(values) {
      let action = "/account/changePwd";
      let method = "PUT";
      this.$myaxios({
        method,
        url: action,
        data: values,
      }).then((res) => {
        const result = res.data || null;
        if (result) {
          const { success, msg } = result;
          if (success) {
            this.$refs.changePwdForm.visible = false;
            this.$message.success("修改密码成功");
          } else {
            this.$message.error(msg);
          }
        }
      });
    },
  },
  computed: {
    user() {
      return this.$store.getters.user;
    },
    menuList() {
      const user = this.$store.getters.user;
      let arr = [];
      if (user.role === "manager") {
        arr = [
          { title: "任务列表", url: "/" },
          { title: "用户管理", url: "/users" },
          { title: "统计分析", url: "/statistic" },
        ];
      } else {
        arr = [
          { title: "任务列表", url: "/" },
          { title: "统计分析", url: "/statistic" },
        ];
      }
      return arr;
    },
    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      // get the first and second parts of path
      let n = path.indexOf("/", 1);
      if (n > 0) {
        n = path.indexOf("/", n + 1);
      }
      return n > 0 ? path.substring(0, n) : path;
    },
  },
  // 注册局部组件
  components: {
    FormModal,
  },
};
</script>

<style scoped lang="less">
#components-layout {
  min-height: 100%;
  height: 100%;

  .header {
    display: flex;
    justify-content: space-between;

    .logo {
      height: 31px;
      line-height: 31px;
      vertical-align: middle;
      margin: 16px 30px 16px 0;
      color: white;
      font-size: 20px;
      float: left;
      cursor: pointer;
    }
  }

  main {
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
    .body {
      width: 100%;
      padding: 10px;
      overflow-y: auto;
      overflow-x: hidden;
    }
  }

  footer {
    padding: 12px 50px;
    text-align: center;
    margin-top: 2px;
  }
}
</style>
